<script setup lang="ts">
import { ref, computed, watch, onMounted, type Ref } from "vue";
import { useAppStoreHook } from "@/store/modules/app";
import {
  delay,
  useDark,
  useECharts,
  type EchartOptions
} from "@pureadmin/utils";
import * as echarts from "echarts/core";

defineProps({
  width: {
    type: String as PropType<string>,
    default: "100%"
  },
  height: {
    type: String as PropType<string>,
    default: "250px"
  }
});

const { isDark } = useDark();

const theme: EchartOptions["theme"] = computed(() => {
  return isDark.value ? "dark" : "light";
});

const barChartRef = ref<HTMLDivElement | null>(null);
const { setOptions, resize } = useECharts(barChartRef as Ref<HTMLDivElement>, {
  theme
});

const drawChart = async () => {
  setOptions(
    {
      title: {
        text: "资产数值", // 设置标题的文本
        left: "left", // 设置标题的位置
        textStyle: {
          color: "#13c2c2", // 设置标题的颜色
          fontWeight: "normal" // 设置标题的字体粗细
        }
      },
      tooltip: {
        trigger: "axis",
        axisPointer: {
          type: "shadow"
        }
      },
      grid: {
        bottom: "20px",
        right: "10px"
      },
      legend: {
        //@ts-expect-error
        right: true,
        data: ["watchers", "fork", "star"]
      },
      //x轴数据
      xAxis: [
        {
          type: "category",
          axisTick: {
            alignWithLabel: true
          },
          axisLabel: {
            interval: 0
            // width: "70",
            // overflow: "truncate"
          },
          data: ["2021", "2022", "2023"],
          triggerEvent: true
        }
      ],
      yAxis: [
        {
          type: "value",
          triggerEvent: true
        }
      ],
      series: [
        {
          name: "watchers",
          type: "bar",
          barWidth: "15%",
          itemStyle: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              {
                offset: 0,
                color: "#e6a23c"
              },
              {
                offset: 1,
                color: "#eebe77"
              }
            ])
          },
          data: [200, 320, 800]
        },
        {
          name: "fork",
          type: "bar",
          barWidth: "15%",
          itemStyle: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              {
                offset: 0,
                color: "#f56c6c"
              },
              {
                offset: 1,
                color: "#f89898"
              }
            ])
          },
          data: [1600, 2460, 4500]
        },
        {
          name: "star",
          type: "bar",
          barWidth: "15%",
          itemStyle: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              {
                offset: 0,
                color: "#409EFF"
              },
              {
                offset: 1,
                color: "#53a7ff"
              }
            ])
          },
          data: [1450, 3620, 7500]
        }
      ],
      addTooltip: true
    },
    {
      name: "click",
      callback: params => {
        console.log("click", params);
      }
    }
  );
};

onMounted(() => {
  drawChart();
});

watch(
  () => useAppStoreHook().getSidebarStatus,
  () => {
    delay(600).then(() => resize());
  }
);
</script>

<template>
  <!-- height: 35vh -->
  <div ref="barChartRef" :style="{ height, width }" />
</template>
